<template>
    <div class="dataStatistics">
        <div class="left">
            <div class="leftTop">
                <div class="title">
                    <img src="/src/assets/my_icon/icon1.png" alt="" />
                    <div>全部预警反制数</div>
                </div>
                <div class="cardBox">
                    <div class="cardItem" v-for="(v, i) in 6" :key="i">
                        <img :src="'/src/assets/my_icon/screen_card' + (i + 1) + '.png'" alt="" />
                        <div class="cardData">
                            <div class="cardData_top">裂变涉诈网址</div>
                            <div class="cardData_center">26</div>
                            <div class="cardData_bottom">今日新增+2</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="leftBottom">
                <div class="title">
                    <img src="/src/assets/my_icon/icon1.png" alt="" />
                    <div>今日新增案件</div>
                </div>
                <div class="table">
                    <table class="dataTable">
                        <tr class="tableHead">
                            <th v-for="(category, index) in categories" :key="index">{{ category }}</th>
                        </tr>
                        <tbody>
                            <tr v-for="(v, i) in 9" :key="i" class="tableContent">
                                <td>01</td>
                                <td>2024-05-24 15:33</td>
                                <td>福州</td>
                                <td>仓山区公安局分局</td>
                                <td>张三被诈骗案</td>
                                <td>投资类诈骗</td>
                                <td :style="{ color: getRandomColor() }">50万</td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- 分页模块 -->
                    <div class="paging">
                        <el-pagination
                            v-model:current-page="currentPage1"
                            v-model:page-size="pageSize1"
                            background
                            layout="prev, pager, next, jumper"
                            :total="100"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        />
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="rightTop">
                <div class="title">
                    <img src="/src/assets/my_icon/icon1.png" alt="" />
                    <div>已获取精准受害者数据案件</div>
                </div>
                <div class="table">
                    <table class="dataTable">
                        <tr class="tableHead">
                            <th v-for="(category, index) in categories1" :key="index">{{ category }}</th>
                        </tr>
                        <tbody>
                            <tr v-for="(v, i) in 7" :key="i" class="tableContent">
                                <td>01</td>
                                <td>2024-05-24 15:33</td>
                                <td>福州</td>
                                <td>仓山区公安局分局</td>
                                <td>张三被诈骗案</td>
                                <td>投资类诈骗</td>
                                <td style="color: #de7800">50万</td>
                                <td>20</td>
                                <td><div class="download">下载</div></td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- 分页模块 -->
                    <div class="paging">
                        <el-pagination
                            v-model:current-page="currentPage2"
                            v-model:page-size="pageSize2"
                            background
                            layout="prev, pager, next, jumper"
                            :total="100"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        />
                    </div>
                </div>
            </div>
            <div class="rightBottom">
                <div class="title">
                    <img src="/src/assets/my_icon/icon1.png" alt="" />
                    <div>已获取打击条件案件</div>
                </div>
                <div class="table">
                    <table class="dataTable">
                        <tr class="tableHead">
                            <th v-for="(category, index) in categories2" :key="index">{{ category }}</th>
                        </tr>
                        <tbody>
                            <tr v-for="(v, i) in 5" :key="i" class="tableContent">
                                <td>01</td>
                                <td>2024-05-24 15:33</td>
                                <td>福州</td>
                                <td>仓山区公安局分局</td>
                                <td>张三被诈骗案</td>
                                <td>投资类诈骗</td>
                                <td style="color: #0ab556">50万</td>
                                <td>
                                    <div style="display: flex; justify-content: space-between; align-items: center">
                                        <div class="btn">定人</div>
                                        <div class="btn2">定案</div>
                                        <div class="btn3">定位</div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- 分页模块 -->
                    <div class="paging">
                        <el-pagination
                            v-model:current-page="currentPage3"
                            v-model:page-size="pageSize3"
                            background
                            layout="prev, pager, next, jumper"
                            :total="100"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const radio1 = ref('1')
console.log(radio1)
const categories: Array = ['序号', '更新时间', '地区', '单位名称', '案件名称', '案件类型', '被骗金额']
const categories1: Array = ['序号', '更新时间', '地区', '单位名称', '案件名称', '案件类型', '被骗金额', '数据条数', '查看']
const categories2: Array = ['序号', '更新时间', '地区', '单位名称', '案件名称', '案件类型', '被骗金额', '案件落定情况']
const currentPage1 = ref(1)
const currentPage2 = ref(1)
const currentPage3 = ref(1)
const pageSize1 = ref(50)
const pageSize2 = ref(50)
const pageSize3 = ref(50)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
const getRandomColor = (): string => {
    // 生成随机颜色
    const letters = '0123456789ABCDEF'
    let color = '#'
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)]
    }
    return color
}
</script>

<style lang="scss" scoped>
.dataStatistics {
    width: 100%;
    display: flex;
    padding: 15px;
    .paging {
        display: flex;
        justify-content: flex-end; /* 将内容向右对齐 */
    }
    .table {
        margin-top: 15px;
        .dataTable {
            width: 100%;
            text-align: center;
            border-collapse: collapse; /* 消除单元格之间的间隙 */

            .dataTable th,
            .dataTable td {
                vertical-align: middle; /* 设置垂直居中对齐 */
            }
            .tableHead {
                background-color: #f1f5fe;
                height: 43px;
                color: #4e79a0;
            }
            .tableContent {
                height: 35px;
                font-size: 13px;
            }
        }
    }
    .title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        img {
            width: 21px;
            height: 21px;
            margin-right: 18px;
        }
    }
    .left {
        width: 50%;
        .leftTop {
            width: 100%;
            border-radius: 10px;
            padding: 22px;
            background-color: #fff;
            .cardBox {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                .cardItem {
                    width: 220px;
                    height: 113px;
                    // background-color: red;
                    margin-top: 20px;
                    border-radius: 10px;
                    position: relative;
                    img {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                    }
                    .cardData {
                        position: absolute;
                        z-index: 9;
                        padding: 15px;
                        .cardData_top {
                        }
                        .cardData_center {
                            font-size: 27px;
                            font-weight: bold;
                            margin-top: 10px;
                        }
                        .cardData_bottom {
                            font-size: 10px;
                            color: #ff0000;
                            margin-top: 15px;
                        }
                    }
                }
            }
        }
        .leftBottom {
            width: 100%;
            background-color: #fff;

            border-radius: 10px;
            margin-top: 25px;
            padding: 22px;
            .paging {
                margin-top: 40px;
            }
        }
    }

    .right {
        margin-left: 25px;
        width: 50%;

        .rightTop {
            width: 100%;
            // height: 532px;
            background-color: #fff;

            border-radius: 10px;
            padding: 22px;
            .paging {
                margin-top: 60px;
            }
            .download {
                width: 40px;
                height: 20px;
                background-color: #005dff;
                color: #fff;
                line-height: 22px;
                text-align: center;
                border-radius: 2px;
            }
        }
        .rightBottom {
            width: 100%;
            // height: 352px;

            border-radius: 10px;
            margin-top: 25px;
            padding: 22px;
            position: relative;
            background-image: url('/src/assets/my_icon/bg.png');
            background-size: cover; /* 图片大小自适应容器 */
            background-position: center; /* 图片在容器中居中 */
            .paging {
                margin-top: 50px;
            }
            .tableHead {
                background-color: #d8eee7;
                color: #4fa06c;
            }
            .btn,
            .btn2,
            .btn3 {
                width: 36px;
                height: 19px;
                line-height: 19px;
                border-radius: 2px;
                color: #fff;
            }
            .btn {
                background-color: #fc0000;
            }
            .btn2 {
                background-color: #fc9400;
            }
            .btn3 {
                background-color: #00c687;
            }
        }
    }
}
</style>
